<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style type="text/css">
			.yidong{
				width: 100px;
				height: 100px;
				background-color: red;
				
				/* 声明调用yidong动画 infinite循环移动*/
				animation: yidong 4s infinite;
				
				/* 改变默认方式，支持坐标系
				 position 位置
				 relative 相对坐标
				 */
				position: relative;
			}
			/* 定义一个动画(关键key 帧frames)
			 from 动画开始的位置
			 to 动画结束的位置
			 css+html自动产生中间过程
			 动画一定要设置它的坐标系
			 */
			@keyframes yidong{
				from{
					left: 0px;
				}
				to{
					left: 300px;
				}
			}
		</style>
	</head>
	<body>
		
		<div class="yidong"></div>
	</body>
</html>
